import { useMemo, useState, useCallback } from "react";


//useMemo可以根据第二个以来参数来决定是否要重新执行，依赖不变化的时候可以缓存结果

const UseMemoCom = ()=> {
    let [count,setCount] = useState<number>(1)
    let [flag,setFlag] = useState<boolean>(false)

    let handleClick1 = ()=>{
        setCount(count + 1)
    }
    let handleClick2 = ()=>{
        setFlag(!flag)
    }

    //计算属性返回的是结果  缓存的是结果
    let num = useMemo<number>(()=>{
        console.log(count);
        return count + 20
    },[count])

    //useCallback 缓存的是函数

    let cb = useCallback(()=>{
         console.log(flag+'');
         
    },[flag])
    // console.log(cb);
    // cb()

    return (
        <fieldset>
            <legend>计算属性</legend>
            <h1>{count}</h1>
            <h1>{num}</h1>
            <button onClick={handleClick1} >点击变更count</button>
            <button onClick={handleClick2} >点击变更flag</button>
        </fieldset>
    )
}

export default UseMemoCom